<template>
	<view class="choose-company">
		<view class="title">请选择机构</view>
		<view v-for="item in companyList" class="flex-center justify-start container px-30 company-name" @click="choose(item)">
			<view class="mr-30 font-24 name">{{item.deptName}}</view>
			<image v-if="deptId == item.id" src="../static/images/select.png" class="select-icon"></image>
		</view>
		<view class="flex-center flex-column no-data" v-if="companyList.length == 0">
			<image src="@/static/images/nodata.png" mode=""></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		companyList
	} from "@/api/home.js"
	export default {
		data() {
			return {
				companyList: [],
				deptId: ''
			}
		},
		onShow() {
			let userInfo = this.$store.getters.getUserInfo;
			if (userInfo) {
				this.getCompanyList(userInfo.userId)
				this.deptId = uni.getStorageSync('deptId') || ''
			}
		},
		methods: {
			getCompanyList(id) {
				companyList().then(res => {
					this.companyList = res.data
				})
			},
			choose(item) {
				if (this.deptId != item.deptId) {
					this.deptId = item.deptId;
					uni.setStorageSync('deptName', item.deptName)
					uni.setStorageSync('deptId', item.deptId)
					uni.removeStorageSync('scenicInfo')
				}
				uni.navigateBack({
					delta: 1
				})

			}
		}
	}
</script>
<style>
	page {
		background: #eee;
		padding: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.choose-company {
		overflow: auto;
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: absolute;
		bottom: 60rpx;
		top: 30rpx;
		.my-top-bg {
			width: 750rpx;
			height: 128rpx;
			position: fixed;
			top: 0;
			left: 0;
		}

		.title {
			font-size: 28rpx;
			color: #000;
			font-weight: bold;
			line-height: 100rpx;
			text-align: center;
		}

		.company-name {
			border-top: 1px solid #f5f5f5;
			height: 100rpx;
			.name {
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000;
				width: 564rpx;
			}

			.select-icon {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
		}

		.no-data {
			width: 100%;
			height: 300rpx;
			

			image {
				width: 200rpx;
				height: 180rpx;
				margin-bottom: 10rpx;
			}

			text {
				color: #999;
			}
		}
	}
</style>